import { defineComponent, ref, watch } from "vue";
import { Drag, DropList } from "vue-easy-dnd";

export default defineComponent({
  props: {
    list: [],
  },

  setup(props, context) {
    const lists = ref([{ name: "dsd" }]);
    // watch(props.list, () => {
    //   lists.value = props.list
    //   console.log(props);
    // });
    // console.log(DropList);
    // const dor = ref();
    const acceptsData = (item) => {
      let elBool = props.filter[item.type]
        ? props.filter[item.type] === "ALL" ||
          props.filter[item.type].indexOf(item.el) >= 0
        : false;
      if (elBool) {
        elBool = item.flowid ? item.flowid !== props.flowid : true;
        //TODO 这里还需要判断对象不可以往子对象中放.
      }
      if (elBool) {
        elBool = props.size > 0 ? props.items?.length < props.size : true;
      }
      return elBool;
    };
    const rerern = {
      item: (item) => {
      //  return createElement('span', 'dsdsd')
       return  <drag
          model={item}
          data={item}
          key={typeof item === "object" ? item.flowid : item}
          onCut={() => onRemove(item)}
          handle=".drag-handle"
        >
          <el-card
            class="card-box"
            shadow="never"
            style="display: inline-grid; border: 1px #eeeeee solid"
          >
            sdsdsaasdasdsad
          </el-card>
        </drag>;
      },
    };

    console.log(props, context);
    const render = () => {
      return (
        // <div>sdsdsd</div>
        <>
          <drop-list
            placeholder="Please input"
            style={{ "min-height": 100 + "px" }}
            accepts-data={true}
            class="dl"
            mode="cut"
            items={lists.value}
            // onInsert={onInsert}
            onReorder={(e) => e.apply(lists.value)}
            row={true}
            column={false}

            scopedSlots={rerern}
          >
          </drop-list>
        </>
      );
    };
    return render;
  },
});
